<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color" mode="aspectFill"></image>
		<z-paging
			bg-color="rgba(0,0,0,0)"
			ref="paging"
			@scroll="pagScroll"
			v-model="dataList"
			@query="queryList"
			:bg-color="scrollTop > 100 ? 'rgba(248,248,248,1)' : 'rgba(248,248,248,0)'"
		>
			<template #top>
				<uv-navbar :bgColor="scrollTop > 100 ? '#fff' : 'rgba(0,0,0,0)'" leftIcon="" :fixed="false" title="通知"></uv-navbar>
			</template>
			<block #refresher="{ refresherStatus }">
				<custom-refresher :status="refresherStatus" />
			</block>
			<!-- 内容 -->
			<view class="contnet">
				<view class="list-box">
					<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="goToDetail(item)">
						<view :style="item.is_read == 1 ? '' : 'opacity: 0.8;'">
							<view class="list-item-title">
								<view class="dot" v-if="item.is_read == 1"></view>
								<view class="title-box">{{ item.title }}</view>
							</view>
							<view class="list-item-data">
								<view class="list-item-data-item">{{ item.content }}</view>
							</view>
							<view class="list-item-btn">
								<view class="tips-box">{{ item.created_at }}</view>
								<view class="btn">查看</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template #empty>
				<image class="no-data" src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-tz.png" mode="widthFix"></image>
			</template>
			<template #bottom>
				<tabbar :status="status"></tabbar>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
import { ref, reactive, toRefs, toRef, getCurrentInstance, onMounted } from 'vue';
import { onShow, onLoad, onPageScroll } from '@dcloudio/uni-app';
const { proxy: that } = getCurrentInstance();

onLoad((e) => {
	uni.setNavigationBarColor({
		frontColor: data.scrollTop > 100 ? '#000000' : '#ffffff',
		backgroundColor: '#ffffff',
		animation: {
			duration: 400,
			timingFunc: 'easeIn'
		}
	});
});
const data = reactive({
	dataList: [],
	scrollTop: 0,
	loading: true,
	status: false
});
let { dataList, scrollTop, loading, status } = toRefs(data);
let pagScroll = (e) => {
	data.scrollTop = e.detail.scrollTop;
	uni.setNavigationBarColor({
		frontColor: e.detail.scrollTop > 100 ? '#000000' : '#ffffff',
		backgroundColor: '#ffffff',
		animation: {
			duration: 400,
			timingFunc: 'easeIn'
		}
	});
};
let queryList = (page, num) => {
	getMessageList(page, num);
};
let getMessageList = (page, num) => {
	data.status = true;
	that.$Api
		.getMessageList({
			is_read: 0,
			msg_type: 0,
			page,
			num
		})
		.then((res) => {
			setTimeout(() => {
				data.loading = false;
			}, 200);
			console.log(res, '消息列表');
			if (res.code == 200) {
				let userInfo = uni.getStorageSync('userInfo');
				userInfo.unread_message_number = res.data.unread_message_number;
				uni.setStorageSync('userInfo', userInfo);
				that.$refs.paging.complete(res.data.list);
			} else {
				that.$refs.paging.complete(false);
			}
			data.status = false;
		})
		.catch((err) => {
			data.status = false;
			that.$refs.paging.complete(false);
			setTimeout(() => {
				data.loading = false;
			}, 200);
		});
};
// 去消息详情
let goToDetail = (item) => {
	switch (Number(item.msg_type)) {
		case 1:
			// 项目详情
			let position_id = uni.getStorageSync('userInfo').position_id;
			let path = '';
			if (position_id == 12 || position_id == 11) {
				path = '/pagesA/project_detail_kh/project_detail_kh?id=' + item.object_id;
			} else {
				path = '/pagesA/project_schedule/project_schedule?id=' + item.object_id;
			}
			uni.navigateTo({
				url: path
			});
			break;
		case 2:
			// 增减项详情
			uni.navigateTo({
				url: '/pages/increase_decrease_items/idi_info/idi_info?id=' + item.object_id
			});
			break;
		case 3:
			// 售后详情
			uni.navigateTo({
				url: '/pages/after_sales_list/as_info/as_info?id=' + item.object_id
			});
			break;
		default:
	}
	let dataList = data.dataList;
	that.$Api
		.readMessage({
			message_id_arr: [item.id]
		})
		.then((res) => {
			console.log(res, '消息已读');
			if (res.code == 200) {
				// that.$refs.paging.reload();
				let index = dataList.findIndex((child) => {
					return child.project_id == item.project_id;
				});
				dataList[index].is_read = 2;
				data.dataList = dataList;
			}
		});
};
</script>

<style lang="scss" scoped>
::v-deep .z-paging-content {
	transition: all 0.2s;
}

.page {
	background-color: #f8f8f8;
	height: 100vh;
	transition: all 0.2s;
	opacity: 0;
}

.bg-color {
	width: 100%;
	height: 708rpx;
	position: fixed;
	transition: all 0.2s;
}

.contnet {
	position: relative;
	z-index: 9999 !important;

	.list-box {
		width: 100%;
		padding: 32rpx 30rpx 0;
		box-sizing: border-box;

		.list-item {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx 28rpx;
			box-sizing: border-box;
			margin-bottom: 36rpx;

			.list-item-title {
				width: 100%;
				display: flex;
				align-items: center;

				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					background: #3b75ff;
				}

				.title-box {
					font-weight: 500;
					font-size: 34rpx;
					color: #000000;
					width: calc(100% - 26rpx);
				}
			}

			.list-item-data {
				width: 100%;
				box-sizing: border-box;

				.list-item-data-item {
					font-weight: 400;
					font-size: 28rpx;
					color: #858386;
					margin: 12rpx 0 32rpx;
				}
			}

			.list-item-btn {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.tips-box {
					font-weight: 400;
					font-size: 24rpx;
					color: #b1b1b1;
				}

				.btn {
					font-weight: 400;
					font-size: 28rpx;
					color: #408efe;
				}
			}
		}
	}
}
</style>
